<template>
  <view>
    <view class="group-information-box" @show="getgroupProfile">
      <view class="group-box">
        <text class="group-ID">群ID:{{ conversation.groupProfile.groupID }}</text>
        <view @tap="showMoreHandler">
          <text class="group-member">聊天成员:{{ conversation.groupProfile.memberCount }}人</text>
          <image v-if="notShow" class="icon-right" src="https://jw-uniapp.oss-cn-beijing.aliyuncs.com/static/assets/down.svg"></image>
          <image v-if="isShow" class="icon-right" src="https://jw-uniapp.oss-cn-beijing.aliyuncs.com/static/assets/up.svg"></image>
        </view>
      </view>
      <view v-show="!hidden" class="showdetail">
        <view v-for="(item, index) in groupmemberprofile" :key="index" class="box" v-if="index < 3" :data-value="item">
          <image class="profile-box" :src="item.avatar || 'https://jw-uniapp.oss-cn-beijing.aliyuncs.com/static/images/avatar.png'"></image>
          <text class="nick-box">{{ item.nick || item.userID }}</text>
        </view>
        <view class="box" v-if="showMore">
          <image class="profile-box" src="https://jw-uniapp.oss-cn-beijing.aliyuncs.com/static/assets/show.svg" @tap="showMoreMember"></image>
          <text class="nick-box">更多</text>
        </view>
        <view class="left-box">
          <view class="box-group">
            <image class="addmember" src="https://jw-uniapp.oss-cn-beijing.aliyuncs.com/static/assets/addgroup.svg" @tap="toPage()"></image>
            <text class="addmember-text">群设置</text>
          </view>
          <view class="box-group-quit">
            <image class="quitgroup" src="https://jw-uniapp.oss-cn-beijing.aliyuncs.com/static/assets/quitgroup.svg" @tap.stop="quitGroup"></image>
            <text class="quitgroup-text">退出群聊</text>
          </view>
        </view>
      </view>
    </view>
    <view class="pop-container">
      <view class="popup-mask" v-if="popupToggle" @tap.stop="handleEditToggle">
        <view class="pop-main">
          <view class="pop-main-header">
            <text class="group-member-text">群成员</text>
            <text class="close" @tap.stop="close">关闭</text>
          </view>
          <view class="image-list">
            <view v-for="(item, index) in groupmemberprofile" :key="index" class="image-nick-box" :data-value="item">
              <image class="image-box" :src="item.avatar || 'https://jw-uniapp.oss-cn-beijing.aliyuncs.com/static/images/avatar.png'"></image>
              <text class="groupmembername">{{ item.nick || item.userID }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="pop-container">
      <view class="quitpop-mask" v-if="quitpopupToggle">
        <view class="quitpop">
          <view class="quit-box">
            <view class="text-box">
              <text class="confirmQuitgroup-text">退出群聊后会同步删除历史聊天记录，是否要退出群聊？</text>
            </view>
            <view class="text-box-qiut" @tap.stop="quitgroupConfirm">
              <text class="quitgroup-confirm">退出</text>
            </view>
            <view class="text-box-cancle" @tap="quitgroupAbandon">
              <text class="quitgroup-abandon">取消</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userID: '',
      // conversation: {},
      newgroup: {},
      groupmemberprofile: {},
      groupmemberavatar: [],
      groupmembernick: [],
      hidden: true,
      notShow: true,
      isShow: false,
      showMore: false,
      addShow: false,
      popupToggle: false,
      quitpopupToggle: false,
      addpopupToggle: false,
    };
  },

  components: {},
  props: {
    conversation: {
      type: Object,
    },
  },
  watch: {
    conversation: {
      handler: function (newVal) {
        if (newVal.type === 'GROUP');
        this.setData({
          conversation: newVal,
        });
      },
      immediate: true,
      deep: true,
    },
  },

  beforeMount() {},

  methods: {
    toPage() {
      uni.navigateTo({
        url: '/im/information/groupInfo?id=' + this.conversation.groupProfile.groupID,
      });
    },
    showMoreHandler() {
      uni.$TUIKit
        .getGroupMemberList({
          groupID: this.conversation.groupProfile.groupID,
          count: 50,
          offset: 0,
        }) // 从0开始拉取30个群成员
        .then(imResponse => {
          if (this.conversation.groupProfile.type === 'Private') {
            this.setData({
              addShow: true,
            });
          }

          if (imResponse.data.memberList.length > 3) {
            this.setData({
              showMore: true,
            });
          }

          this.setData({
            groupmemberprofile: imResponse.data.memberList,
            hidden: !this.hidden,
            notShow: !this.notShow,
            isShow: !this.isShow,
          });
        });
    },

    showless() {
      this.setData({
        isShow: false,
        notShow: true,
        hidden: true,
      });
    },

    showMoreMember() {
      this.setData({
        popupToggle: true, //  quitpopupToggle: false
      });
    },

    close() {
      this.setData({
        popupToggle: false,
        addpopupToggle: false,
        quitpopupToggle: false,
      });
    },

    quitGroup() {
      this.setData({
        quitpopupToggle: true,
        popupToggle: false,
      });
    },

    quitgroupConfirm() {
      uni.$TUIKit
        .quitGroup(this.conversation.groupProfile.groupID)
        .then(imResponse => {
          console.log(imResponse.data.groupID); // 退出成功的群 ID

          uni.navigateBack({
            delta: 1,
          });
        })
        .catch(imError => {
          uni.showToast({
            title: '该群不允许群主主动退出',
            icon: 'none',
          });
          console.warn('quitGroup error:', imError); // 退出群组失败的相关信息
        });
    },

    quitgroupAbandon() {
      console.log(22222);
      this.setData({
        quitpopupToggle: false,
      });
    },

    addMember() {
      this.setData({
        addpopupToggle: true,
      });
    },

    binduserIDInput(e) {
      const id = e.detail.value;
      this.setData({
        userID: id,
      });
    },

    submit() {
      console.log(this.userID);
      uni.$TUIKit
        .addGroupMember({
          groupID: this.conversation.groupProfile.groupID,
          userIDList: [this.userID],
        })
        .then(imResponse => {
          if (imResponse.data.successUserIDList.length > 0) {
            uni.showToast({
              title: '添加成功',
              duration: 800,
            });
            this.userID = '';
            this.addMemberModalVisible = false;
            this.setData({
              addpopupToggle: false,
            });
          }

          if (imResponse.data.existedUserIDList.length > 0) {
            uni.showToast({
              title: '该用户已在群中',
              duration: 800,
              icon: 'none',
            });
          }
        })
        .catch(imError => {
          console.warn('addGroupMember error:', imError); // 错误信息

          uni.showToast({
            title: '添加失败，请确保该用户存在',
            duration: 800,
            icon: 'none',
          });
        });
    },

    handleEditToggle() {
      console.log('占位：函数 handleEditToggle 未声明');
    },

    getgroupProfile() {
      console.log('占位：函数 getgroupProfile 未声明');
    },
  },
};
</script>
<style>
@import './index.css';
</style>
